<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      title="立即评价"
      left-icon="left"
      @clickLeft="goBack"
    />

    <!-- 服务评分 -->
    <view class="section">
      <view class="section-title">服务评分</view>
      <view class="shop-info">
        <image class="shop-img" :src="shopImg[0].img" mode="aspectFill" />
        <view class="shop-name">{{merchantInfo.name}}</view>
      </view>
      <view class="rating">
        <uni-rate :value="rating" @change="onRateChange" />
      </view>
    </view>

    <!-- 评价 -->
    <view class="section">
      <view class="section-title">评语（0-200字）</view>
      <textarea
        class="textarea"
        maxlength="200"
        placeholder="请写下您的意见和建议..."
        v-model="comment"
      />
    </view>

    <!-- 上传照片 -->
    <view class="section">
      <view class="section-title">照片（选填）</view>
      <view class="upload-box" @tap="chooseImage">
        <view class="plus">+</view>
        <view class="upload-text">上传照片</view>
      </view>
      <view class="preview" v-if="image">
        <image :src="image" class="preview-img" />
      </view>
    </view>

    <!-- 提交按钮 -->
    <button class="submit-btn" type="primary" @click="submit">提交</button>
  </view>
</template>

<script>
import request from '../../uitls/request'
export default {
  data() {
    return {
      rating: 0,
      comment: '',
      image: '',
      img:'',
      orderId:'',
      merchantId:'',
      serviceInfo:'',
      merchantInfo:'',
      shopImg:'',
     commentScore:0,
     userId:uni.getStorageSync('userInfo').id,
    };
  },
  onLoad(options){
    if(options.orderId){
      this.orderId=options.orderId;
      console.log("接收到的订单ID:",options.orderId)
    }
    if(options.merchantId){
      this.merchantId=options.merchantId;
      console.log("接收到的店铺ID:",options.merchantId)
    }
    this.selectShop(this.merchantId);
    this.selectShopImg(this.merchantId);
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    onRateChange(e) {
      this.rating = e.value;
    },
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.image = res.tempFilePaths[0];
        }
      });
    },
    submit() {
      if (!this.comment.trim()) {
        return uni.showToast({ title: '请填写评语', icon: 'none' });
      }
      request({
      url:'/evaluate/evaluate/',
      method:'POST',
      data:{
        merchantId:this.merchantId,
        score:this.rating, 
        comment:this.comment,
        orderId:this.orderId,
        userId:this.userId,
        commentTime:new Date().toISOString()
      },
      success:(res)=>{
      if(res.data.code===200){
            request({
              url:`/offer/orders/${this.orderId}`,
              method:'PUT',
              data:{
                orderStatus:5  
              },
              success:()=>{
                uni.$emit('updateOrderStatus')
              }
            })
            uni.showToast({title:'提交成功'});
            setTimeout(()=>{
              uni.redirectTo({ url: '/pages/jackwang/wodedingdan/wodedingdan' })
            },1500)
      }
    }
  })
    },
    //商店名称
 selectShop(merchantId){
  request({
  url: `/merchant/merchant/`+merchantId,
  method: 'GET',
  success: (res) => {
  if (res.data.code === 200) {
  this.merchantInfo=res.data.data;
  }
  console.log("店铺名称",this.merchantInfo.name)
  }

  })
  },
  //商店图片
  selectShopImg(merchantId){
    request({
    url: `/merchant/imgs/`+merchantId,
    method: 'GET', 
    success: (res) => {
    if (res.data.code === 200) {

    this.shopImg=res.data.data;
    }
    console.log("店铺图片",this.shopImg[0].img)
  }
    })
  }

  }
 
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #fff;
}
.section {
  margin-bottom: 40rpx;
}
.section-title {
  font-weight: bold;
  font-size: 30rpx;
  margin-bottom: 20rpx;
}
.shop-info {
  display: flex;
  align-items: center;
}
.shop-img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}
.shop-name {
  font-size: 32rpx;
  font-weight: 500;
}
.rating {
  margin-top: 20rpx;
}
.textarea {
  width: 100%;
  height: 180rpx;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
}
.upload-box {
  width: 150rpx;
  height: 150rpx;
  border: 2rpx dashed #ccc;
  border-radius: 12rpx;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}
.plus {
  font-size: 50rpx;
  color: #999;
}
.upload-text {
  font-size: 26rpx;
  color: #666;
}
.preview {
  margin-top: 20rpx;
}
.preview-img {
  width: 150rpx;
  height: 150rpx;
  border-radius: 12rpx;
}
.submit-btn {
  width: 90%;
  margin: 40rpx auto;
  background-color: #007aff;
  color: #fff;
}
</style>
